<template>
  <el-dialog
    :title="type == 'edit' ? '编辑' : '新增'"
    :visible.sync="dialogFormVisible"
    width="700px"
    style="padding-top: 0"
    @close="close"
  >
    <!-- 查看模式 -->
    <el-form
      ref="subFormRef"
      :model="form"
      label-width="100px"
      style="margin-bottom: 20px"
      :rules="rules"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="机房名称" prop="labName">
            <el-input v-model="form.labName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机房容量" prop="capacity">
            <el-input
              v-model="form.capacity"
              placeholder="请输入"
              type="number"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="机房楼层" prop="tier">
            <el-input v-model="form.tier" placeholder="请输入" type="number" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="机房位置" prop="address">
            <el-input v-model="form.address" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="机房描述">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              v-model="form.description"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="convention">{{
        type == "edit" ? "保 存" : "新 增"
      }}</el-button>
    </div>
  </el-dialog>
</template>
  
<script>
import { labDetails, labAdd, labUpdate } from "@/api/studentUserAdmin/index";
export default {
  name: "TableEdit",
  data() {
    return {
      type: "", //模式
      form: {
        labName: "", //机房名称
        func: "", //机房用途
        address: "", //位置
        capacity: "", //容量
        description: "", //描述
        tier: "", //楼层
      },

      dialogFormVisible: false, //弹窗开关
      conventionShow: false, //预约模式

      rules: {
        labName: [
          { required: true, message: "请输入机房名称", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入机房位置", trigger: "change" },
        ],
        func: [
          { required: true, message: "请输入机房用途", trigger: "change" },
        ],
        capacity: [
          { required: true, message: "请输入机房容量", trigger: "change" },
        ],
        tier: [
          { required: true, message: "请输入机房楼层", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  methods: {
    reset() {
      this.form = {
        labName: "", //机房名称
        func: "", //机房用途
        address: "", //位置
        capacity: "", //容量
        description: "", //描述
        tier: "", //楼层
      };
    },
    // 显示弹窗
    showEdit(row, type) {
      this.type = type;
      if (type == "edit") {
        this.dialogFormVisible = true;
        // this.subForm.user_id = this.$store.getters.userId;
        this.labDetails(row.labId);
      } else {
        this.dialogFormVisible = true;
        this.reset();
      }
    },
    close() {
      this.dialogFormVisible = false;
    },
    //查询详情
    labDetails(labId) {
      labDetails(labId).then((res) => {
        this.form = res.data;
      });
    },
    // 修改或添加
    convention() {
      this.$refs["subFormRef"].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "请求中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          if (this.type == "edit") {
            labUpdate(this.form)
              .then((res) => {
                loading.close();
                this.$message.success(res.msg);
                this.dialogFormVisible = false;
                this.$emit("getList");
              })
              .catch((err) => {
                loading.close();
                this.$message.error(res.msg);
              });
          } else {
            labAdd(this.form)
              .then((res) => {
                loading.close();
                this.$message.success(res.msg);
                this.dialogFormVisible = false;
                this.$emit("getList");
              })
              .catch((err) => {
                loading.close();
                this.$message.error(res.msg);
              });
          }
        }
      });
    },
  },
};
</script>
<style>
.el-dialog__body {
  padding-top: 10px !important;
}
</style>
<style lang="scss" scoped>
.title-box {
  display: block;
  margin-bottom: 20px;
  color: #333;
  font-weight: 700;
}
</style>
  